<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础功能</text>
         <view class="uv-demo-block__content">
            <view class="uv-alert-item">
               <uv-alert description="山不在于高，有了神仙就出名" type="warning"></uv-alert>
            </view>
            <view class="uv-alert-item">
               <uv-alert description="水不在深，有龙则灵" type="primary"></uv-alert>
            </view>
            <view class="uv-alert-item">
               <uv-alert
                  description="斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青"
                  type="error"
               ></uv-alert>
            </view>
            <view class="uv-alert-item">
               <uv-alert description="谈笑有鸿儒，往来无白丁" type="info"></uv-alert>
            </view>
            <view class="uv-alert-item">
               <uv-alert description="可以调素琴，阅金经" type="success"></uv-alert>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">深浅色</text>
         <view class="uv-demo-block__content">
            <view class="uv-alert-item">
               <uv-alert description="无丝竹之乱耳，无案牍之劳形" type="warning"></uv-alert>
            </view>
            <view class="uv-alert-item">
               <uv-alert
                  description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有"
                  type="warning"
                  effect="dark"
               ></uv-alert>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">显示图标</text>
         <view class="uv-demo-block__content">
            <view class="uv-alert-item">
               <uv-alert
                  description="六王毕，四海一；蜀山兀，阿房出"
                  type="error"
                  showIcon
               ></uv-alert>
            </view>
            <view class="uv-alert-item">
               <uv-alert
                  description="覆压三百余里，隔离天日。骊山北构而西折，直走咸阳，二川溶溶，流入宫墙"
                  type="error"
                  effect="dark"
                  showIcon
               ></uv-alert>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">可关闭</text>
         <view class="uv-demo-block__content">
            <view class="uv-alert-item">
               <uv-alert
                  description="五步一楼，十步一阁；廊腰缦回，檐牙高啄；各抱地势，钩心斗角"
                  type="success"
                  showIcon
                  closable
               ></uv-alert>
            </view>
            <view class="uv-alert-item">
               <uv-alert
                  description="盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落"
                  type="success"
                  effect="dark"
                  closable
                  showIcon
               ></uv-alert>
            </view>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">带标题</text>
         <view class="uv-demo-block__content">
            <view class="uv-alert-item">
               <uv-alert
                  title="妃嫔媵嫱，王子皇孙，辞楼下殿"
                  description="长桥卧波，未云何龙？复道行空，不霁何虹"
                  type="info"
                  showIcon
                  closable
               ></uv-alert>
            </view>
            <view class="uv-alert-item">
               <uv-alert
                  title="辇来于秦，朝歌夜弦，为秦宫人。明星荧荧，开妆镜也"
                  description="高低冥迷，不知西东。歌台暖响，春光融融；舞殿冷袖，风雨凄凄。一日之内，一宫之间，而气候不齐"
                  type="info"
                  effect="dark"
                  closable
                  showIcon
               ></uv-alert>
            </view>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const title = ref('');
const description = ref('');
</script>

<style lang="scss" scoped>
.uv-alert-item {
   flex: 1;
   margin-bottom: 10px;
}

.uv-demo-block__content {
   flex-direction: column !important;
   align-items: stretch;
}
</style>
